import type { PayloadAction } from '@reduxjs/toolkit';
import { createSlice } from '@reduxjs/toolkit';
import getAllThemesThunk from './thunks';
import type { ThemesStateType, ThemesType } from '../../types/themes';

const initialState: ThemesStateType = {
  themes: [],
  activeThemeId: null,
};

const themesSlice = createSlice({
  name: 'themes',
  initialState,
  reducers: {
    setActiveTheme(state, action: PayloadAction<number | null>) {
      state.activeThemeId = action.payload;
    },
  },
  extraReducers: (builder) => {
    builder.addCase(getAllThemesThunk.fulfilled, (state, action: PayloadAction<ThemesType[]>) => {
      state.themes = action.payload;
    });
  },
});

export const { setActiveTheme } = themesSlice.actions;
export default themesSlice.reducer;
